<template>
  <div>
    <h1>App</h1>

    <ul>
      <li>
        <RouterLink to="/home" active-class="active">go Home</RouterLink>
      </li>
      <li>
        <RouterLink to="/about" active-class="active">go About</RouterLink>
      </li>
    </ul>

    <hr />

    <!-- 防止一个坑位，路由视图，用于在匹配到某条路由地址之后，渲染对应组件的一个东西 -->
    <RouterView />
  </div>
</template>

<style>
.router-link-active {
  color: red;
}

.active {
  color: green;
}
</style>
